<!-- 信息面板  start -->
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel111">机构用户信息1</h4>
        </div>

        <form class="form-horizontal" role="form" id="deptUserForm1">
            <div class="panel">
                <!-- <header class="panel-heading">
                    查询条件
                </header> -->
                <div class="panel-body">
                    <div class="panel-body">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label class="control-label col-md-4">应用ID</label>
                                <div class="col-md-8">
                                    <input name="clientId" type="text" class="form-control"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="text-center">
                        <input type="button" id="btn_searcher" value="查询" class="btn btn-primary"></input>
                        <input type="reset" id="btn_reset" class="btn btn-reset"></input>
                    </div>
                </div>
            </div>
        </form>

        <div class="col-lg-12">
            <table id="deptUserDialogTable" class="col-lg-12"></table>

        </div>
        <div class="modal-footer">
            <div class="text-center">
                <button id="save" type="button" class="btn btn-primary">提交</button>
                <button id="reset" type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <span id="tip"> </span>
            </div>
        </div>
    </div>
</div>
<!-- 信息面板  end -->
<!-- 加载数据  函数方法 start -->
<script th:inline="javascript">
    $(function () {
        var roleName = [[${roleName}]];
        //已经被选中的数据
        var clientIds = [[${clientIds}]];
        console.log(clientIds);
        if (roleName == null) {
            roleName = "";
        }
        //获取已经被选中的数据，与后选中的组合
        overAllIds = clientIds.split(",");
        //数据加载
        $('#deptUserDialogTable').bootstrapTable({
            url: 'oauth2/role-client-list',
            method: 'post',                      //请求方式（*）
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            undefinedText: "",					//当数据为 undefined 时显示的字符
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            pageSize: 5,  						//每页显示的记录数
            pageNumber: 1, 						//当前第几页
            pageList: [5, 10, 15],  		//记录数可选列表
            sortable: false,                    //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            //查询参数,每次调用是会带上这个参数，可自定义
            queryParams: queryParams,
            search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 4,             //最少允许的列数
            responseHandler: function responseHandler(res) {
                if (res) {
                    clientIds = res.data.clientIds;
                    return {
                        "rows": res.data.list,
                        "total": res.data.total
                    };

                } else {
                    return {
                        "rows": [],
                        "total": 0
                    };
                }
            },
            //clickToSelect: true,              //是否启用点击选中行
            //height: 600,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "clientId",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            onCheck: function (row, tr, flied) {

            },

            onUncheck: function (row, tr, flied) {
                //单行最前面的checkbox被取消
            },
            onCheckAll: function (row, tr, flied) {
                //最顶上的checkbox被选中
            },
            onUncheckAll: function (row, tr, flied) {
                //最顶上的checkbox被取消
            },
            columns: [{
                checkbox: true,
                align: 'center',
                formatter: function (value, row, index) {
                    if ($.inArray(row.clientId, overAllIds) != -1) {// 因为 判断数组里有没有这个 id
                        return {
                            checked: true               // 存在则选中
                        }
                    }
                    if (clientIds.indexOf(row.clientId) > -1) {
                        return {
                            checked: true//设置选中
                        };
                    }
                }
            }, {
                field: 'clientId',
                title: '应用ID'
            }, {
                field: 'webServerRedirectUri',
                title: '重定向地址'
            }]
        });

        //为翻页保留checkbox选中准备
        $('#deptUserDialogTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
            var datas = $.isArray(rows) ? rows : [rows];        // 点击时获取选中的行或取消选中的行
            // 保存到全局 Array() 里
            if(e.type.indexOf('uncheck')==-1){
                $.each(datas,function(i,v){
                    // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加　
                    overAllIds.indexOf(v.clientId) == -1 ? overAllIds.push(v.clientId) : -1;
                });
            }else{
                $.each(datas,function(i,v){
                    overAllIds.splice(overAllIds.indexOf(v.clientId),1);    //删除取消选中行
                });
            }
        });
        //校验
        $('#deptUserForm1').bootstrapValidator({
            //		        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                clientId: {
                    validators: {
                        regexp: {
                            regexp: /^[_a-zA-Z0-9-]+$/,
                            message: '不能输入中文和特殊字符'
                        }
                    }
                }
            }
        });

        $("#btn_reset").click(function () {
            $('#deptUserForm1').data("bootstrapValidator").resetForm();
        });

        //搜索
        $("#btn_searcher").click(function () {
            var flag = $('#deptUserForm1').bootstrapValidator(
                    'validate').data('bootstrapValidator')
                    .isValid();
            if (flag) {
                refreshFunctionDialog();
            }

        });

        //设置查询条件，把分页，查询条件，排序等信息拼接成一个models字符串对象传递至后台
        function queryParams(params) {
            var search = {};
            $.each($("#deptUserForm1").serializeArray(), function (i, field) {
                search[field.name] = field.value;
            });
            var json = {
                'page': this.pageNumber,
                'pageSize': this.pageSize,
                'filters': [{
                    field: "clientId",
                    value: search.clientId
                }],
                'roleName': roleName,
                'isSelectAll': true
            };
            var baseData = JSON.stringify(json);
            var param = {
                models: baseData
            };

            return param;
        }

        //刷新
        function refreshFunctionDialog() {
            $('#deptUserDialogTable').bootstrapTable('refresh');
        }

        //执行保存
        $("#save").click(function () {
            //遍历选中的行
            $.ajax({
                url: 'oauth2/role-client-save',
                type: 'post',
                data: {
                    clientIds: overAllIds,
                    preClientIds: clientIds,
                    roleName: roleName
                },
                success: function (data, textStatus, jqXHR) {
                    var roleName = data.data;
                    $('#ModalDeptUser').modal('hide');
                    refreshFunction();
                    $('#deptUserListTable').bootstrapTable('refresh');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
        });
    });

</script>
<!-- 加载数据  函数方法 end -->
